<template>
  <div>
    <p>
      {{ name }}--{{ age }}--{{ kill.salary }}
      <button @click="age++">年龄++</button>
      <button @click="kill.salary++">薪水++</button>
    </p>
  </div>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "",
  props: [""],
  setup() {
    let hero = reactive({
      name: "迪迦奥特曼",
      age: 100,
      kill: {
        qwer: "光线",
        salary: 1000,
      },
    });

    // 注意: 要想让对象中的深层的属性也实现响应式,需要使用tRef
    // 语法: let 变量名 = toRef(要处理对象,要实现响应式的对象属性);
    // let name = toRef(hero, "name");
    // let age = toRef(hero, "age");
    // let salary = toRef(hero.kill, "salary");

    // 注意: toRefs 对将象中的深层的属性也实现响应式,全部深层次的数据一次性实现响应式
    // 语法: 变量 =  toRefs(要处理的对象数据)
    hero = toRefs(hero);

    return {
      //   name,
      //   age,
      //   salary,

      ...hero,
    };
  },
};
</script>
<style scoped>
</style>
